<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">
        问题单编号：{{ detailObject.id }}
        <span style="margin-left:10px;" :class="detailObject.status | statusFilter" />
        <span class="statusName">{{ detailObject.status | nameFilter }}</span>
      </div>

      <div class="detailContent">
        <div class="title"><span>提单环节</span></div>
      </div>

      <div class="main">
        <div class="tab">
          <div class="row">
            <label>问题单类型：</label>
            <div class="detail">{{ detailObject.typeName }}</div>
          </div>
          <div class="row">
            <label>位置描述：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="detailObject.location"
              class="detail textHidden"
            >{{ detailObject.location }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>检查内容：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="detailObject.content"
              class="detail textHidden"
            >{{ detailObject.content }}</div>
          </div>
          <div class="row">
            <label>整改人：</label>
            <div class="detail">{{ detailObject.rectifyPersonName }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <div class="imgtext">照片：</div>
            <!-- <label>照片：</label> -->
            <div v-for="(item, index) in detailObject.files" :key="index" class="imgList">
              <div @click="lookimg(item,index)">
                <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="item.path" :alt="item.name">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="detailObject.status==='solving'||detailObject.status==='recovering'||detailObject.status==='reject'" class="detailContent">
        <div class="title"><span>报验环节</span></div>
      </div>

      <div v-for="(item, index) in inspectionsObject" :key="index" class="main">
        <div class="tab">
          <div class="row">
            <label>报验人：</label>
            <div class="detail">{{ item.creatorName }}</div>
          </div>
          <div class="row">
            <label>施工阶段：</label>
            <div class="detail">{{ item.constructionStage }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>报验类型：</label>
            <div class="detail">{{ item.typeName }}</div>
          </div>
          <div class="row">
            <label>报验描述：</label>
            <div
              style="width:400px;margin-bottom: -3px;"
              :title="item.description"
              class="detail textHidden"
            >{{ item.description }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <label>验收人：</label>
            <div class="detail">{{ item.creatorName }}</div>
          </div>
        </div>
        <div class="tab">
          <div class="row">
            <div class="imgtext">照片：</div>
            <div v-for="(img, key) in item.files" :key="key" class="imgList">
              <div @click="lookimg(img,index)">
                <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="img.path" :alt="img.name">
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.replyList.length>0" class="tab">
          <div class="row">
            <div class="imgtext">回复内容：</div>
            <div v-for="(text, key) in item.replyList" :key="key" class="imgList1">
              <div class="imagetext">{{ text.replyContent }}</div>
              <span v-if="text.files.length>0">
                <div v-for="(img, index1) in text.files" :key="index1">
                  <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="img.path" :alt="img.name">
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="detailObject.status==='solving'||detailObject.status==='reject'" class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>施工阶段</label>
              <el-form-item prop="constructionStage">
                <el-input
                  v-model="createList.constructionStage"
                  type="text"
                  placeholder="请输入"
                  name="constructionStage"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>报验类型</label>
              <el-form-item prop="type">
                <el-select
                  v-model="createList.type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in typeStatusList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>报验描述</label>
              <el-form-item prop="description">
                <el-input
                  v-model="createList.description"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  placeholder="请输入"
                  name="content"
                  maxlength="500"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>验收人</label>
              <el-form-item prop="acceptor">
                <el-select
                  v-model="createList.acceptor"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="tab">
            <div class="imgtitle">
              <label>上传照片</label>
              <div style="margin: 20px 0 0 0;">
                <el-form-item>
                  <el-upload
                    ref="upload"
                    :action="pathUrl+'/file/img'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >提交</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>

      <div v-if="detailObject.status==='recovering'" class="detailContent">
        <div class="title"><span>验收环节</span></div>
      </div>

      <div v-if="detailObject.status==='recovering'" class="main">
        <el-form ref="successData" :model="successData" :rules="successrules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <!-- <label>验收结果</label> -->
              <el-form-item label="验收结果" prop="status">
                <el-radio-group v-model="successData.status">
                  <el-radio label="success">同意</el-radio>
                  <el-radio label="reject">不同意</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>情况说明</label>
              <el-form-item prop="replyContent">
                <el-input
                  v-model="successData.replyContent"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  placeholder="请输入"
                  name="replyContent"
                  maxlength="500"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="imgtitle">
              <label>上传照片</label>
              <div style="margin: 20px 0 0 0;">
                <el-form-item>
                  <el-upload
                    ref="upload"
                    :action="pathUrl+'/file/img'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitSuccessData"
            >提交</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>

    </div>

  </div>
</template>

<script>
import { detailInspect, createInspection, replyInspection, getInspectType } from '@/api/patrolExamine'
import { getUserList } from '@/api/user'
import { deleteFiles } from '@/api/file'

export default {
  name: 'EdgePatrol',
  filters: {
    statusFilter(status) {
      const statusMap = {
        unsolved: 'unsolvedColor',
        solving: 'solvingColor',
        recovering: 'recoveringColor',
        reject: 'rejectdColor',
        success: 'resolvedColor'
      }
      return statusMap[status]
    },
    nameFilter(status) {
      const statusMap = {
        unsolved: '未解决',
        solving: '解决中',
        recovering: '报验中',
        reject: '已驳回',
        success: '已验收'
      }
      return statusMap[status]
    }
  },
  components: {
  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      createList: {
        inspectId: this.$route.query.id,
        type: '',
        constructionStage: '',
        description: '',
        acceptor: '',
        files: []
      },
      detailObject: {},
      inspectionsObject: [],
      successData: {
        inspectionId: '',
        status: '',
        replyContent: '',
        files: []
      },
      // 上传图片
      imagerType: ['image/jpeg', 'image/gif', 'image/bmp', 'image/png', 'image/jpg'],
      createListRules: {
        type: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        constructionStage: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        acceptor: [
          { required: true, message: '必填', trigger: 'change' }
        ]
      },
      successrules: {
        status: [
          { required: true, message: '必选', trigger: 'change' }
        ],
        replyContent: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      loading: false,
      getSubmitData: false,
      dialogImageUrl: '',
      dialogVisible: false,
      typeStatusList: [
        // { type: 'quality', name: '质量问题' },
        // { type: 'security', name: '安全问题' }
      ],
      userList: []
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
    this.getDatail()
    this.getInspectType()
  },
  methods: {
    // 问题单类型
    async getInspectType() {
      const res = await getInspectType()
      if (res.code === 200) {
        this.typeStatusList = res.data
      } else {
        this.$message({
          message: '问题单类型查询出错!',
          type: 'error',
          showClose: true,
          duration: 2 * 1000
        })
      }
    },
    // 获取用户信息
    async getList() {
      const res = await getUserList()
      if (res.code === 200) {
        this.userList = res.data
      }
    },
    // 获取详情信息
    async getDatail() {
      const id = this.$route.query.id
      const res = await detailInspect(id)
      if (res.code === 200) {
        this.detailObject = res.data.inspectTicket
        if (res.data.inspections) {
          this.inspectionsObject = res.data.inspections
        }
      }
    },
    // 查看图片
    lookimg(path, index) {

    },
    comeBack() {
      this.$router.go(-1)
    },
    // 图片上传
    handleAvatarSuccess(res, file, fileList) {
      // this.createList.progressNodeList[index].imageUrl = URL.createObjectURL(file.raw)
      if (res.code === 200) {
        this.createList.files.push(res.data)
        this.successData.files.push(res.data)
      } else {
        this.$refs.upload.clearFiles()
        this.$message({
          type: 'error',
          message: res.msg || 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    beforeAvatarUpload(file) {
      // eslint-disable-next-line no-unneeded-ternary
      const isJPG = this.imagerType.indexOf(file.type) !== -1
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message({
          type: 'error',
          message: '上传头像图片只能是 JPG 格式!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      if (!isLt10M) {
        this.$message({
          type: 'error',
          message: '上传图片大小不能超过 10MB!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      return isJPG && isLt10M
    },
    async handleRemove(file, fileList) {
      const id = file.response.data.id
      const res = await deleteFiles(id)
      if (res.code === 200) {
        this.createList.files.splice(this.createList.files.findIndex(item => item.id === id), 1)
        this.successData.files.splice(this.successData.files.findIndex(item => item.id === id), 1)
        this.$message({
          type: 'success',
          message: '图片删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        console.log('图片删除失败!')
      }
      // console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          createInspection(this.createList).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '提交成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push('patrolExamine')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    },
    submitSuccessData() {
      this.$refs.successData.validate(valid => {
        if (valid) {
          this.loading = true
          this.successData.inspectionId = this.inspectionsObject.pop().id
          replyInspection(this.successData).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '提交成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push('patrolExamine')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
        .statusName{
          font-size:12px;
          font-weight:400;
          color:rgba(255,255,255,0.6);
        }
      }
      .detailContent{
        .title{
          padding: 0;
          height:28px;
          background:rgba(247,181,0,.2);
          font-size:14px;
          font-weight:500;
          color:rgba(247,181,0,1);
          width: 90%;
          margin-left: 34px;
          span{
            margin: 0 0 0 20px;
            line-height: 28px;
          }
        }
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .detail{
              font-size:14px;
              font-weight:400;
              color:rgba(255,255,255,0.65);
              display: inline-block;
            }
            .imgtext{
              font-size: 14px;
              font-weight: 400;
              color: rgba(247,181,0,.8);
              margin: 0 0 20px 0;
            }
            .imgList{
              // display: flex;
              float: left;
              div{
                width: 150px;
                // flex: 1;
              }
            }
            .imgList1{
              div{
                width: 150px;
                // flex: 1;
              }
              .repimg{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
              }
              .imagetext{
                font-size:14px;
                font-weight:400;
                color:rgba(255,255,255,0.65);
                margin: 0 0 10px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 1024px;
              }
            }
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
  }
</style>
